<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style:none;
            }
            .a5{
                height: 74px;
                background:url('images/bg.jpg') repeat-x;
            }
            .nav{
                width: 968px;
                height: 74px;
                margin: 0px auto;
            }
            .nav h1{
                float: left;
            }
            .nav ul{
                float: right;
            }
            .nav li{
                float: right;
                
            }
            .nav img{
                height: 40px;
                margin-top: 16px;
              }  
              .nav a{
                  font-size: 13px;
                  text-decoration: none;
                  color: #fff;
              }
              .nav li{
                  margin-right: 14px;
                  padding: 9px;
                  margin-top: 17px;
              }
              .nav li:hover{
                  background: red;
                  border-radius: 20px;                  
              }
            .header{
                height: 74px;
                /* 所有的图片放置在images文件夹内部 */
                
            }
            .banner{
                height: 424px;
                background:gray;
                border-bottom:1px solid red;
            }
            .con{
                width: 968px;
                height: 374px;
                background:gray;
                margin:50px auto 32px;
            }
            .footer{
                width: 968px;
                height: 50px;
                background: pink;
                margin:0px auto;
            }
            .banner .wrap{
                width: 968px;
                margin:0px auto;
            }
            .banner .left{
                float: left;
            }
            .banner .right{
                float: right;
            }
            .con .left{
                float: left;
                width: 635px;
            }
            .con .right{
                float: right;
                width: 333px;
            }
            .con .left img{
                width: 629px;
            }
            .con .left li{
                float: left;
                width: 217px;
            }
            .con .left .last{
                width: 196px ;
            }
            .list span{
                float: right;
            }
            i{
                color:red
            }
            .wrap .left h2{
                margin-top: 57px;
                margin-bottom: 11px;
                font-size: 24px;
            }
            .wrap .list li{
                line-height: 31px;
                font-size: 15px;
            }
            .wrap .left img{
                margin-top: 16px;
                margin-bottom: 16px;
            }
            .wrap .a2 a{
                text-decoration: none;
                color: lime;
                font-size: 12px;
            }
            .wrap .a1 li{
                line-height: 25px;
            }
            .wrap .a2 a:hover{
                text-decoration: underline;
            }
            .a6{
                float:left;
            }
            .footer p{
                font-size: 12px;
            }
            .footer .left{
                float: left;
            }
            .footer .right{
                float:right;
            }
            .footer .bottom{
                width: 968px;
                float: left;
            }
            .wrap .left {
                 float: left;
                 width: 400px;
             }
             .wrap .right{
                 float: right;
             }
            
        </style>
    </head>
    <body>
        
            <div class="a5">
                <div class="nav">
                <h1>
                    <a href="a6">
                        <img src="images/weo.png" alt="">
                    </a>
                </h1>
                <ul>
                    <li>
                        <a href="">
                            微信网页版
                        </a>
                    </li>
                    <li>
                     <a href="">
                            表情开放平台
                    </a>
                    </li>
                    <li>
                        <a href="">
                        企业微信
                         </a>
                    </li>                    
                    <li>
                        <a href="">
                        微信广告
                         </a>
                    </li>     
                    <li>
                        <a href="">
                        微信支付
                         </a>
                    </li>     
                    <li>
                        <a href="">
                        开放平台
                         </a>
                    </li>     
                    <li>
                        <a href="">
                        公众平台
                         </a>
                    </li>     
                    <li>
                        <a href="">
                        帮助与反馈
                         </a>
                    </li> 
                    <li>
                        <a href="">
                        首页
                         </a>
                    </li>         
                 </ul>
                </div>
            </div>
        </div>
    <div class="header">
        <div class="banner">
            <div class="wrap">
               <div class="left">
                   <h2>微信，是一个生活方式</h2>
                   <ul class="a1">
                    <li>超过十亿人使用的手机应用</li>
                    <li>支持发送语音短信、视频、图片和文字</li>
                    <li>可以群聊，仅耗少量流量，适合大部分智能手机</li>
                    </ul>
                    <img src="images/down.png" alt="">
                    <ul class="a2">
                        <li><a href="">忘记了微信帐号或密码？</a></li>
                        <li><a href="">自助解除登录或功能限制</a></li>
                        <li><a href="">冻结或解冻微信帐号 </a></li>
                    </ul>
                   
               </div>
               <img src="images/com.png" alt="" class="right">
            </div>
        </div>
        <div class="con">
            <div class="left">
                <img src="images/b.png" alt="">
                <ul>
                    <li>
                        <h6> 微信网页版</h6>
                        <p>扫一扫二维码</p>
                        <p>就能在浏览器上使用微信</p>
                         <a href="">了解更多</a>        
                    </li>
                    <li>
                        <h6> 微信网页版</h6>
                        <p>扫一扫二维码</p>
                        <p>就能在浏览器上使用微信</p>
                        <a href="">了解更多</a>        
                    </li>
                    <li class="last">
                        <h6> 微信网页版</h6>
                        <p>扫一扫二维码</p>
                        <p>就能在浏览器上使用微信</p>
                        <a href="">了解更多</a>        
                    </li>
                </ul>
            </div>
            <div class="right">       
        <h6>更多消息</h6>
        <ul class="list">
                <li>s违法记录时代甲方收到缴费 <i>new</i> <span>02-25</span></li>
                <li>微信 8.0.3 for iOS 正式版发布<span>02-25</span></li>
                <li>微信 3.2.1 for Windows 正式版发布  <span>02-25</span></li>
                <li>关于部分 iOS 9 用户无法更新微信 <i>new</i> <span>02-25</span></li>
                <li>微信外部链接内容管理规范 <i>new</i> <span>02-25</span></li>
                <li>微信网页版 2.1 版本发布 <span>02-25</span></li>
                <li>微信表情开放平台上线 <span>02-25</span></li>
                <li>官方辟谣公众号开通 <span>02-25</span></li>
            </ul>
            </div>
            </div> 
            
            <div class="footer">
                <p class="left">  关于腾讯 | 服务条款 | 使用规范 | 客服中心 | 隐私保护指引 </p>
                <p class="right">简体中文 |  繁體中文 |  English</p>
                <p class="bottom">© 1998 - 2021 Tencent Inc. All Rights Reserved        </p>
            </div>
        </body>
</html>
<!-- 
    一个页面只有一个版心
 -->